/**
 * Responsive Helper for Naive UI Grid System
 * Provides utilities to make Naive UI components responsive
 */

import { computed, ComputedRef, ref, onMounted, onUnmounted } from 'vue'

// Breakpoints matching our CSS
export const BREAKPOINTS = {
  xs: 480,
  sm: 768,
  md: 1024,
  lg: 1280,
  xl: 1536
} as const

// Grid column configurations for different screen sizes
export const GRID_COLS = {
  xs: 1,
  sm: 2,
  md: 3,
  lg: 4,
  xl: 4
} as const

/**
 * Custom hook to get window size
 */
function useWindowSize() {
  const width = ref(window.innerWidth)
  const height = ref(window.innerHeight)
  
  const handleResize = () => {
    width.value = window.innerWidth
    height.value = window.innerHeight
  }
  
  onMounted(() => {
    window.addEventListener('resize', handleResize)
  })
  
  onUnmounted(() => {
    window.removeEventListener('resize', handleResize)
  })
  
  return { width, height }
}

/**
 * Get current breakpoint based on window width
 */
export function useBreakpoint() {
  const { width } = useWindowSize()
  
  const breakpoint = computed(() => {
    if (width.value < BREAKPOINTS.xs) return 'xs'
    if (width.value < BREAKPOINTS.sm) return 'sm'
    if (width.value < BREAKPOINTS.md) return 'md'
    if (width.value < BREAKPOINTS.lg) return 'lg'
    return 'xl'
  })
  
  const isMobile = computed(() => width.value < BREAKPOINTS.sm)
  const isTablet = computed(() => width.value >= BREAKPOINTS.sm && width.value < BREAKPOINTS.md)
  const isDesktop = computed(() => width.value >= BREAKPOINTS.md)
  
  return {
    breakpoint,
    isMobile,
    isTablet,
    isDesktop,
    width
  }
}

/**
 * Get responsive grid span based on breakpoint
 * @param desktop - span for desktop (default)
 * @param tablet - span for tablet (optional)
 * @param mobile - span for mobile (optional)
 */
export function useResponsiveSpan(
  desktop: number,
  tablet?: number,
  mobile?: number
): ComputedRef<number> {
  const { breakpoint } = useBreakpoint()
  
  return computed(() => {
    switch (breakpoint.value) {
      case 'xs':
      case 'sm':
        return mobile ?? 24 // Full width on mobile by default
      case 'md':
        return tablet ?? desktop
      default:
        return desktop
    }
  })
}

/**
 * Get responsive grid columns configuration
 */
export function useResponsiveCols(): ComputedRef<number> {
  const { breakpoint } = useBreakpoint()
  
  return computed(() => {
    switch (breakpoint.value) {
      case 'xs':
        return 1
      case 'sm':
        return 2
      case 'md':
        return 3
      case 'lg':
      case 'xl':
        return 4
      default:
        return 3
    }
  })
}

/**
 * Get responsive gap size
 */
export function useResponsiveGap(): ComputedRef<number> {
  const { breakpoint } = useBreakpoint()
  
  return computed(() => {
    switch (breakpoint.value) {
      case 'xs':
        return 8
      case 'sm':
        return 12
      case 'md':
        return 16
      case 'lg':
      case 'xl':
        return 24
      default:
        return 16
    }
  })
}

/**
 * Helper to convert fixed n-grid layouts to responsive
 * Example usage:
 * <n-grid :cols="24" :x-gap="responsiveGap">
 *   <n-gi :span="leftSpan">...</n-gi>
 *   <n-gi :span="rightSpan">...</n-gi>
 * </n-grid>
 * 
 * Where:
 * const { leftSpan, rightSpan } = useResponsiveLayout('half')
 */
export function useResponsiveLayout(layout: 'half' | 'thirds' | 'sidebar' | 'custom', customSpans?: {
  desktop: number[],
  tablet?: number[],
  mobile?: number[]
}) {
  const { breakpoint } = useBreakpoint()
  
  const spans = computed(() => {
    if (layout === 'custom' && customSpans) {
      switch (breakpoint.value) {
        case 'xs':
        case 'sm':
          return customSpans.mobile ?? customSpans.desktop.map(() => 24)
        case 'md':
          return customSpans.tablet ?? customSpans.desktop
        default:
          return customSpans.desktop
      }
    }
    
    switch (layout) {
      case 'half':
        return breakpoint.value === 'xs' || breakpoint.value === 'sm' 
          ? [24, 24] 
          : [12, 12]
      
      case 'thirds':
        if (breakpoint.value === 'xs' || breakpoint.value === 'sm') return [24, 24, 24]
        if (breakpoint.value === 'md') return [12, 12, 24]
        return [8, 8, 8]
      
      case 'sidebar':
        if (breakpoint.value === 'xs' || breakpoint.value === 'sm') return [24, 24]
        if (breakpoint.value === 'md') return [8, 16]
        return [6, 18]
      
      default:
        return [24]
    }
  })
  
  return {
    spans: spans.value,
    leftSpan: spans.value[0],
    rightSpan: spans.value[1],
    middleSpan: spans.value[2]
  }
}

// Export type helpers
export type Breakpoint = 'xs' | 'sm' | 'md' | 'lg' | 'xl'
export type ResponsiveValue<T> = T | Partial<Record<Breakpoint, T>>